/*
 * @Author: chentao 
 * @Date: 2021-08-26 10:06:50 
 * @Last Modified by: chentao
 * @Last Modified time: 2021-08-26 10:59:30
 */
import React, { createRef, RefObject } from 'react'


//使用forwardRef定义一个组件  React.forwardRef 可以多第二个参数 
const TargetComponent = React.forwardRef<HTMLInputElement>((props, ref) => {
    return (
        <div className="forwardContainer">
            <input type="text" />
        </div>
    )
})

interface Props { }

class RefComponent extends React.Component<Props>{

    private customRef: RefObject<HTMLDivElement>;
    private targetRef: RefObject<HTMLInputElement>;
    constructor(props: Props) {
        super(props)
        this.customRef = createRef()
        this.targetRef = createRef()
    }
    render() {
        return (
            <div >
                <div ref="stringRef">aaa</div>
                <div ref={this.customRef}>aaa</div>
                <TargetComponent ref={this.targetRef} />
            </div>
        )
    }
}
export default RefComponent